<template>
  <div class="noti-dialog">
    <scroll-box class="scroll-box" listenHeight ref="scrollBox" :bottomDisabled="true" :topDisabled="topDisabled" @touchTop="touchTop">
      <loading v-if="!topDisabled && notiList.length >= 30"></loading>
      <div class="noti-item" v-for="item in notiList" :key="item.createdAt">
        <div class="noti-container" v-if="item.type === 0">
          <div class="noti-title">登录操作通知</div>
          <div class="noti-content">{{`你的账号 "${$store.state.userInfo.userName}" 进行了登录操作`}}</div>
          <div class="noti-detail">
            <div class="noti-detail-item">登录ID：{{$store.state.userInfo.id}}</div>
            <div class="noti-detail-item">登录时间：{{item.createdAt | handleTime(that)}}</div>
          </div>
        </div>
      </div>
    </scroll-box>
  </div>
</template>

<script>
import { api_getNotiList } from '@/api/notification'
import ScrollBox from '@/components/ScrollBox.vue'
import Loading from '@/components/Loading.vue'

export default {
  components: { ScrollBox, Loading },
  name: 'noti-dialog',
  data () {
    return {
      notiList: [],
      // 禁止触顶
      topDisabled: false,
      that: this,
    }
  },
  created () {
    this.$bus.$on('notice', this.addNotification)

    // 第一次创建时直接请求通知数据
    this.getNotiList()
  },
  beforeDestroy () {
    this.$bus.$off('notice', this.addNotification)
  },
  methods: {
    getNotiList (lastTime) {
      api_getNotiList({ lastTime }).then(res => {
        if (res.data.code === 200) {
          let arr = this.insertTimeTag(res.data.list)

          if (!lastTime) {
            this.notiList.unshift(...arr)
            // 没传时间，则是第一次获取聊天记录，滚动到底部
            this.scrollToFunc('instant')
          } else {
            this.$refs.scrollBox.keepHeight(() => {
              this.notiList.unshift(...arr)
            })
          }

          // 聊天记录一次请求30条，小于30条说明没有更多聊天数据了
          this.topDisabled = arr.length !== 30
        }
      })
    },

    // 触顶的回调
    touchTop () {
      this.topDisabled = true;
      this.getNotiList(this.notiList[0].createdAt)
    },

    // 添加通知
    addNotification (noti) {
      // console.log(noti);
      let type = null;
      switch (noti.type) {
        case 'login':
          type = 0
          break;
      }
      this.notiList.push({
        type,
        createdAt: noti.createdAt,
      })

      // 判断当前是否离底，再进行滚动
      if (this.$refs.scrollBox.getIsBottom(100)) {
        this.scrollToFunc()
      }
    },

    // 聊天框滚动到底部
    scrollToFunc (behavior) {
      this.$nextTick(() => {
        if (!this.$refs.scrollBox) return
        this.$refs.scrollBox.scrollToFunc(behavior)
      })
    },

    // 根据消息时间插入时间节点标签
    insertTimeTag (chatList) {
      let arr = []
      chatList.forEach((item) => {
        arr.unshift(item);
      })
      return arr;
    },

  },
  filters: {
    handleTime (time, that) {
      return that.$moment(time * 1).format('YYYY年MM月DD日 HH:mm')
    }
  }
}
</script>

<style scoped>
.noti-dialog {
  background: url("@/assets/img/chat_background.png") 0 0 no-repeat;
  background-size: 100%;
}

.scroll-box {
  height: calc(100vh - 55px);
  overflow-y: scroll;
  padding: 0 25px;
}

.noti-item {
  text-align: left;
  background-color: #fff;
  border-radius: 5px;
  font-size: 14px;
  padding: 14px 16px;
  width: 360px;
  margin: 30px auto;
  box-shadow: 0 0px 50px -12px rgba(0, 0, 0, 0.15);
}

.noti-title {
  font-size: 15px;
}

.noti-content {
  margin: 15px 0 20px;
}

.noti-detail-item {
  margin: 5px 0;
}
</style>